<template>
  <a-card class="fromBox" title="基金申报表单">
    <template #extra>
      <a-tooltip placement="top">
        <template #title>
          <span>返回上级</span>
        </template>
        <a-button size="small" @click="getOut"> <RollbackOutlined /></a-button>
      </a-tooltip>
    </template>
    <a-steps :current="current" :items="items" type="navigation" @change="StepsChange"></a-steps>
    <div class="Funding-content">
      <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" labelWrap="true">
        <div class="fromBox">
          <h3 v-show="steps[current].title == '第一步'" style="font-size: 17px; color: rgb(71, 143, 202) !important; font-weight: bolder">
            申请信息：
          </h3>
          <a-form-item label="项目名称" name="blprojectname" v-show="steps[current].title == '第一步'">
            <a-input v-model:value="formState.blprojectname" placeholder="请填写" disabled />
          </a-form-item>
          <a-form-item label="长期筹资" name="bltype" v-show="steps[current].title == '第一步'">
            <a-radio-group v-model:value="formState.bltype" disabled>
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="筹资目标" name="blfinancmoney" v-show="steps[current].title == '第一步'">
            <a-input v-model:value="formState.blfinancmoney" placeholder="请填写" disabled style="width: 200px" />
            <span style="color: red">(单位/元)</span>
          </a-form-item>
          <a-form-item label="申报单位" name="blsubject" v-show="steps[current].title == '第一步'">
            <a-select v-model:value="formState.blsubject" placeholder="请选择项申报单位" allowClear disabled>
              <a-select-option :value="item.blname" v-for="(item, index) in Deport">{{ item.blname }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="负责人姓名" name="blleader" v-show="steps[current].title == '第一步'">
            <a-input v-model:value="formState.blleader" placeholder="请填写" disabled />
          </a-form-item>
          <a-form-item label="联系人姓名" name="bllinker" v-show="steps[current].title == '第一步'">
            <a-input v-model:value="formState.bllinker" placeholder="请填写" disabled />
          </a-form-item>
          <a-form-item label="联系电话" name="bllinktel" v-show="steps[current].title == '第一步'">
            <a-input v-model:value="formState.bllinktel" placeholder="请填写" disabled />
          </a-form-item>
        </div>
        <div v-show="steps[current].title == '第一步'">
          <h3 style="font-size: 17px; color: rgb(71, 143, 202) !important; font-weight: bolder">项目信息：</h3>
          <a-form-item label="项目描述" name="blbrief">
            <a-textarea v-model:value="formState.blbrief" :rows="12" placeholder="简单描述项目用途及目的,200字以内" disabled />
          </a-form-item>
          <a-form-item label="项目简介" name="bldetail">
            <a-textarea
              v-model:value="formState.bldetail"
              :rows="12"
              placeholder="包含项目的用途、预期效果、建议起捐额度、答谢方式等、500字以内"
              disabled
            />
          </a-form-item>
          <a-form-item label="项目类型" name="blext3">
            <a-select v-model:value="formState.blext3" placeholder="请选择项目类型" allowClear disabled>
              <a-select-option value="110周年校庆专题">110周年校庆专题</a-select-option>
              <a-select-option value="人才培养">人才培养</a-select-option>
              <a-select-option value="校园活动">校园活动</a-select-option>
              <a-select-option value="校友返校">校友返校</a-select-option>
              <a-select-option value="基础建设">基础建设</a-select-option>
              <a-select-option value="科研创新">科研创新</a-select-option>
              <a-select-option value="社会公益">社会公益</a-select-option>
              <a-select-option value="事业发展">事业发展</a-select-option>
            </a-select>
          </a-form-item>
        </div>
        <div v-show="steps[current].title == '第二步'">
          <a-form-item label="审核通过" name="status">
            <a-radio-group v-model:value="formState.status">
              <a-radio :value="2">是</a-radio>
              <a-radio :value="-1">否</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="审核意见" name="blext1">
            <a-textarea v-model:value="formState.blext1" :rows="12" placeholder="请填写审核意见" />
          </a-form-item>
        </div>
      </a-form>
    </div>
    <div class="steps-action">
      <a-space>
        <a-button v-if="current > 0" style="margin-left: 8px" @click="prev"><ArrowLeftOutlined />上一步</a-button>
        <a-button v-if="current == steps.length - 1" type="primary" @click="onSubmit"> 提交 </a-button>
        <a-button v-if="current < steps.length - 1" type="primary" @click="next">下一步<ArrowRightOutlined /></a-button>
      </a-space>
    </div>
  </a-card>
</template>

<script setup>
  import { reactive, ref, defineEmits, onMounted, toRaw, watch } from 'vue';
  import { message } from 'ant-design-vue';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { Funding } from '../../../../api/funding/funding-api';
  import { Fundingapproval } from '../../../../api/Fundingapproval/Fundingapproval-api';
  //  步骤条
  const current = ref(0);
  //点击步骤条的事件
  function StepsChange(e) {
    current.value = e;
  }
  //前进
  const next = () => {
    current.value++;
  };
  //后退
  const prev = () => {
    current.value--;
  };
  //步骤条标题
  const steps = [
    {
      title: '第一步',
    },
    {
      title: '第二步',
    },
  ];
  const items = steps.map((item) => ({
    key: item.title,
    title: item.title,
  }));
  //表单验证规则
  const formRef = ref();
  const labelCol = {
    span: 5,
  };
  const wrapperCol = {
    span: 15,
  };
  const formState = ref({});
  const rules = {
    status: [
      {
        required: true,
        message: '请选择审核状态',
        trigger: 'change',
      },
    ],
    blext1: [
      {
        required: false,
        message: '请选择填写审核意见',
        trigger: 'change',
      },
    ],
  };
  // 获取日期
  const props = defineProps({
    DataId: String,
  });
  async function getInitdate() {
    try {
      let blfinancprojectid = props.DataId;
      let res = await Funding.FindDetail(blfinancprojectid);
      formState.value = res.blfinancproject;
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        console.log('values', formState, toRaw(formState.value));
        let obj = {
          id: props.DataId,
          status: toRaw(formState.value).status,
          blext1: toRaw(formState.value).blext1,
        };
        Fundingapproval.updateStatus(obj)
          .then((res) => {
            console.log(res, '提交状态');
            getOut();
            message.success('审批成功');
          })
          .catch((error) => {
            smartSentry.captureError(error);
          });
      })
      .catch((error) => {
        console.log(error);
        message.warning('请选择审批意见');
      });
  };

  const resetForm = () => {
    formRef.value.resetFields();
  };
  const emit = defineEmits();
  //返回表格
  const getOut = () => {
    let obj = {
      type: 0,
    };
    emit('getBlack', obj);
  };

  onMounted(() => {
    getInitdate();
  });
</script>

<style lang="scss">
  .Funding-content {
    width: 80%;
    border-radius: 6px;
    min-height: 510px;
    padding-top: 40px;
    margin: 20px auto;
  }

  .steps-action {
    margin-top: 24px;
    float: right;
  }

  [data-theme='dark'] .steps-content {
    background-color: #2f2f2f;
    border: 1px dashed #404040;
  }
  .fromBox {
  }
  .jianjie span {
    display: block;
    font-size: 16px;
    padding-bottom: 20px;
    padding-left: 20px;
  }
</style>
